<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!--<link rel="stylesheet" href="../bootstrap-3.3.0-dist/dist/css/bootstrap.css">-->
    <link rel="stylesheet" href="../css/common.css" type="text/css">
    <script src="../js/jquery.js" type="text/javascript"></script>
    <!--<script src="../bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>-->
    <style>

    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9W18pvr7gj55zPvt3t3ngUOx">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
    </script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />


    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <!--加载检索信息窗口-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />

    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

</head>
<body>
<div class="content">
    <div id="container"></div>
    <div id="left-panel">
        <div class="search">
            <div class="container">
                <div class="container-content">
                    <!--<div class="container-input">-->
                        <input class="container-input" placeholder="点击搜索">
                        <div class="input-clear"></div>
                    <!--</div>-->
                </div>
            </div>
            <button class="search-button"></button>
        </div>
        <div class="panel-level panel-level0" style="display: none;">
            <div class="type-choice">
                <div><img src="../img/time.png"><span>按年份</span></div>
                <div><img src="../img/place.png"><span>按地区</span></div>
                <div><img src="../img/industry.png"><span>按产业类型</span></div>
            </div>
            <div class="le-choice">
                <div>企业数量</div>
                <div>总产值</div>
                <div>创意增加值</div>
                <div>统计年份</div>
            </div>
            <p><img src="../img/lishi.png">企业</p>
            <p><img src="../img/lishi.png">产值</p>
            <span class="del-history">删除历史</span>
        </div>
        <div class="panel-level panel-level1" style="display: none;">
            <div class="detail-firm">
                <p><span class="f-left">维度研究</span><span class="f-right">罗湖区蔡屋围发展大厦</span></p>
                <p><span class="f-left">文化软件业</span><span class="f-right">电话：0755-********</span></p>
            </div>
            <div class="detail-firm">
                <p><span class="f-left">维度研究</span><span class="f-right">罗湖区蔡屋围发展大厦</span></p>
                <p><span class="f-left">文化软件业</span><span class="f-right">电话：0755-********</span></p>
            </div>
            <div class="detail-firm">
                <p><span class="f-left">维度研究</span><span class="f-right">罗湖区蔡屋围发展大厦</span></p>
                <p><span class="f-left">文化软件业</span><span class="f-right">电话：0755-********</span></p>
            </div>
            <div class="detail-firm">
                <p><span class="f-left">维度研究</span><span class="f-right">罗湖区蔡屋围发展大厦</span></p>
                <p><span class="f-left">文化软件业</span><span class="f-right">电话：0755-********</span></p>
            </div>
            <div class="detail-firm">
                <p><span class="f-left">维度研究</span><span class="f-right">罗湖区蔡屋围发展大厦</span></p>
                <p><span class="f-left">文化软件业</span><span class="f-right">电话：0755-********</span></p>
            </div>
            <div class="detail-firm">
                <p><span class="f-left">维度研究</span><span class="f-right">罗湖区蔡屋围发展大厦</span></p>
                <p><span class="f-left">文化软件业</span><span class="f-right">电话：0755-********</span></p>
            </div>
            <div class="detail-firm">
                <p><span class="f-left">维度研究</span><span class="f-right">罗湖区蔡屋围发展大厦</span></p>
                <p><span class="f-left">文化软件业</span><span class="f-right">电话：0755-********</span></p>
            </div>
            <div class="detail-firm">
                <p><span class="f-left">维度研究</span><span class="f-right">罗湖区蔡屋围发展大厦</span></p>
                <p><span class="f-left">文化软件业</span><span class="f-right">电话：0755-********</span></p>
            </div>

        </div>
    </div>
</div>


<!--<div class="content">-->
    <!--<div id="map"></div>-->
<!--</div>-->
</body>
</html>
<script type="text/javascript">





    var map = new BMap.Map("container");          // 创建地图实例
    var point = new BMap.Point(114.115266,22.561251);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用


    //信息窗口
    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
        '<img src="../wen1.png" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
        '地址：深圳市蔡屋围发展大厦<br/>电话：(0755)88888888<br/>简介：维度研究位于蔡屋围发展大厦，*****************。' +
        '</div>'+'<a href="chart.html">'+'点击详情'+'</a>';

    //创建检索信息窗口对象
    var searchInfoWindow = null;
    searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
        title  : "百度大厦",      //标题
        width  : 290,             //宽度
        height : 105,              //高度
        panel  : "panel",         //检索结果面板
        enableAutoPan : true,     //自动平移
        searchTypes   :[
            BMAPLIB_TAB_SEARCH,   //周边检索
            BMAPLIB_TAB_TO_HERE,  //到这里去
            BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    });
    var marker = new BMap.Marker(point); //创建marker对象
    marker.enableDragging(); //marker可拖拽
    marker.addEventListener("click", function(e){
        searchInfoWindow.open(marker);
    });
    map.addOverlay(marker); //在地图中添加marker
    //样式1
    var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
        title: "信息框1", //标题
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[
            BMAPLIB_TAB_FROM_HERE, //从这里出发
            BMAPLIB_TAB_SEARCH   //周边检索
        ]
    });

    var marker=new Array();
    //添加多个点
    function addMarker(point,i){
        marker[i] = new BMap.Marker(point);
        marker[i].enableDragging(); //marker可拖拽
        marker[i].addEventListener("click", function(e){
            searchInfoWindow.open(marker[i]);
        });
        map.addOverlay(marker[i]);

    }

    // 随机向地图添加25个标注
    var point=new Array();
    map.clearOverlays();
    var bounds = map.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var lngSpan = Math.abs(sw.lng - ne.lng);
    var latSpan = Math.abs(ne.lat - sw.lat);
    for (var i = 0; i < 25; i ++) {
        point[i] = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
        addMarker(point[i],i);
    }


    //圆形区域
    cicle(point);


//多边形区域

    Polygon(point);




    //监听滚动事件
    function scrollFunc(e){
        var direct=0;
        e=e || window.event;
        var direct = e.wheelDelta > 0 ? 1 : -1;//1:向上 ,-1:向下
        if(direct==1){
            $('.BMapLabel').hide();
            for(var i=0;i<25;i++){
                marker[i].show();
            }
        }
    }
    window.onmousewheel=scrollFunc;



    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
        }
    });





/*
    function getBoundary(data){
        for(var i=0;i<3;i++){
            var bdary = new BMap.Boundary();
            bdary.get(data.split("-")[0], function(rs){       //获取行政区域
                //  map.clearOverlays();        //清除地图覆盖物
                var count = rs.boundaries.length; //行政区域的点有多少个
                if (count === 0) {
                    alert('未能获取当前输入行政区域');
                    return ;
                }
                var pointArray = [];
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000",fillColor:data.split("-")[1]}); //建立多边形覆盖物
                    map.addOverlay(ply);  //添加覆盖物
                    pointArray = pointArray.concat(ply.getPath());
                }
                map.setViewport(pointArray);    //调整视野

            });
        }

    }
    var datas = new Array("深圳罗湖区-#ff0000","深圳福田区-#ff5500","深圳龙岗区-#ffff00","深圳南山区-#00ff00","深圳盐田区-#C5C5C5");
    for(var i=0;i<datas.length;i++){
        getBoundary(datas[i]);
    }*/


    $('.container-input').click(function () {
        $('.panel-level1').hide();
        $('.panel-level0').show();
    });
    $('#container').click(function () {
        $('.container-input').blur();
        $('.panel-level0').hide();
    });
    $('#container').click(function () {
        $('.container-input').blur();
        $('.panel-level1').hide();
    });
    $('.type-choice>div').click(function () {
        $('.panel-level0').hide();
        $('.panel-level1').show();
    });

    //圆形
    function cicle() {
        var circleNumber=0;
        var circle = new BMap.Circle(point[0],800,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
        map.addOverlay(circle);
        for(var i=0;i<25;i++){
            var result = BMapLib.GeoUtils.isPointInCircle(point[i], circle);
            if(result == true){
                marker[i].hide();//隐藏圆里的标注
                circleNumber++;
            }

        }
        console.log('在圆形区域中的point有：'+circleNumber+'个');

        var opts = {
            position : point[0],    // 指定文本标注所在的地理位置
            offset   : new BMap.Size(-10, 0)    //设置文本偏移量
        };
        var label = new BMap.Label(circleNumber, opts);  // 创建文本标注对象
        label.setStyle({
            color : "red",
            fontSize : "18px",
            height : "20px",
            lineHeight : "20px",
            fontFamily:"微软雅黑",
            padding:"5px",
            textAlign:"center",
            backgroundColor:"none",
            border:'0'
        });
        map.addOverlay(label);
    }
    //矩形
    function Polygon(point) {
        //绘制多边形

        var poinNumber=0;
        var j;
        var polygon = new BMap.Polygon([
            new BMap.Point(114.115266,22.555051),
            new BMap.Point(114.123666,22.566251),
            new BMap.Point(114.119666,22.573251),
            new BMap.Point(114.111666,22.567551),
            new BMap.Point(114.108666,22.562251)
        ], {strokeColor:"#95B0E7", strokeWeight:2, strokeOpacity:0.5,fillColor:"#CCD4D8"});  //创建多边形
        map.addOverlay(polygon);   //增加多边形
        for(var i=0;i<25;i++){
            var result = BMapLib.GeoUtils.isPointInPolygon(point[i], polygon);
            if(result == true){
                marker[i].hide();//隐藏多边形里面的标注
                poinNumber++;
                j=i;
            }
        }
        //    var label= new BMap.Label("poinNumber",{offset:new BMap.Size(20,-10)});
        //    polygon.setLabel(label);
        console.log("在矩形区域里的point有："+poinNumber+"个");

        var popo = new BMap.Point((114.115266+114.123666+114.119666+114.111666+114.108666)/5.0,(22.555051+22.566251+22.573251+22.567551+22.562251)/5.0);
        var opts = {
            position : popo,    // 指定文本标注所在的地理位置
            offset   : new BMap.Size(-10, 0)    //设置文本偏移量
        };
        var label = new BMap.Label(poinNumber, opts);  // 创建文本标注对象
        label.setStyle({
            color : "red",
            fontSize : "18px",
            height : "20px",
            lineHeight : "20px",
            fontFamily:"微软雅黑",
            padding:"5px",
            textAlign:"center",
            backgroundColor:"none",
            border:'0'
        });
        map.addOverlay(label);
    }


    function Polygon1() {
        //绘制多边形

        var poinNumber=0;
        var j;
        var polygon = new BMap.Polygon([
            new BMap.Point(114.087116,22.566181),
            new BMap.Point(114.087058,22.565347),
            new BMap.Point(114.084795,22.563845),
            new BMap.Point(114.081812,22.564713),
            new BMap.Point(114.081273,22.568017),

            new BMap.Point(114.084076,22.568851),
            new BMap.Point(114.083681,22.570987),
            new BMap.Point(114.085908,22.573256),
            new BMap.Point(114.090939,22.575626),
            new BMap.Point(114.096293,22.572455),
            new BMap.Point(114.095826,22.569251),
            new BMap.Point(114.090616,22.565847)
        ], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5,fillColor:"#CCD4D8"});  //创建多边形
        map.addOverlay(polygon);   //增加多边形



        //    var label= new BMap.Label("poinNumber",{offset:new BMap.Size(20,-10)});
        //    polygon.setLabel(label);

        var popo = new BMap.Point((114.087116+114.087058+114.084795+114.081812+114.081273+114.084076+114.083681+114.085908+114.090939+114.096293+114.095826+114.090616)/12.0,(22.566181+22.565347+22.563845+22.564713+22.568017+22.568851+22.570987+22.573256+22.575626+22.572455+22.569251+22.565847)/12.0);
//        var opts = {
//            position : popo,    // 指定文本标注所在的地理位置
//            offset   : new BMap.Size(-10, 0)    //设置文本偏移量
//        };
//        var label = new BMap.Label("笔架山公园", opts);  // 创建文本标注对象
//        label.setStyle({
//            color : "red",
//            fontSize : "18px",
//            height : "20px",
//            lineHeight : "20px",
//            fontFamily:"微软雅黑",
//            padding:"5px",
//            textAlign:"center",
//            backgroundColor:"none",
//            border:'0'
//        });
//        map.addOverlay(label);
    }
    
    $('.search-button').click(function () {
        if($('.container-input').val()=="笔架山公园"){
            Polygon1();
        }

    });
    $('.detail-firm').click(function () {
        $('.panel-level').hide();
        searchInfoWindow.open(marker[2]);
    });
</script>
